import { SearchBar } from 'antd-mobile';
import { LocationFill, DownFill, BellOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import '../../../styles/index/home/Header.scss'
class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { name: '宅家烧烤' },
        { name: '早餐面包' },
        { name: '小龙虾' },
        { name: '方便净菜' },
        { name: '六一儿童节' },

      ]
    }
  }

  render() {
    return (
      <div className="header1">
        <div className='top1'>
          <p className='address'>
            <span><LocationFill fontSize={18} /> </span>
            童话路12号天使路
            <span> <DownFill fontSize={10} /></span>
            <span className='right1'><BellOutline fontSize={18} /></span>
          </p>
          <SearchBar
            placeholder='当季蔬菜'
            style={{ '--background': '#fff', '--border-radius': '20px' }}
          />
        </div>
        <div className="list1">
          {
            this.state.list.map((item, index) => {
              return (
                <div className="item1" key={index}>
                  {item.name}
                </div>
              )

            })

          }
        </div>
      </div>
    );
  }
}

export default Header;